import React, { useEffect } from 'react';
import {
  Box,
  CircularProgress,
  CircularProgressLabel,
  useColorModeValue,
  useBreakpointValue,
} from '@chakra-ui/react';
import { decrementTimer, startTimer, stopTimer, resetTimer } from '../../redux/timer/timerSlice';
import { useAppDispatch, useAppSelector } from '../../redux/hooks';

export default function Timer(): JSX.Element {
  const dispatch = useAppDispatch();
  const { timeLeft, isActive } = useAppSelector((state) => state.timer);

  useEffect(() => {
    if (!isActive) {
      dispatch(startTimer());
    }

    if (isActive) {
      const interval = setInterval(() => {
        dispatch(decrementTimer());
      }, 1000);

      return () => clearInterval(interval);
    }
  }, [isActive, dispatch]);

  useEffect(() => {
    if (timeLeft === 0) {
      dispatch(stopTimer());
    }
  }, [timeLeft, dispatch]);

  // useEffect(() => {
  //   dispatch(resetTimer());
  //   dispatch(startTimer());
  // }, [dispatch]);

  // Используем хук useColorModeValue для адаптации к темной и светлой теме
  const timerColor = useColorModeValue(
    timeLeft <= 5 ? 'red.600' : 'yellow.400',
    timeLeft <= 5 ? 'red.300' : 'yellow.400',
  );
  const trackColor = useColorModeValue('blue.200', 'blue.200');

  // Определяем размер таймера в зависимости от типа устройства
  const timerSize = useBreakpointValue({ base: '80px', sm: '100px', md: '120px' });

  return (
    <Box display="flex" justifyContent="center" alignItems="center" mt="20px">
      {' '}
      {/* Изменено для размещения ниже и центрирования */}
      <CircularProgress
        value={timeLeft}
        max={15}
        size={timerSize} // Установка размера таймера
        color={timerColor}
        thickness="12px" // Увеличена толщина для более выразительного вида
        trackColor={trackColor} // Используем переменную для цвета трека
      >
        <CircularProgressLabel fontSize="4xl">{timeLeft}</CircularProgressLabel>{' '}
        {/* Уменьшен размер шрифта для лучшей видимости */}
      </CircularProgress>
    </Box>
  );
}
